<html>
<head>
<style>
@font-face {
  font-family: fontface;
  src: local('Times New Roman'), local('Tinos-Regular');
}

.local {
  font-family: 'Times New Roman', 'Tinos';
}

.face {
  font-family: fontface;
}

.bold {
  font-weight: 700;
  font-size: 20px;
}

.italic {
  font-style: italic;
  font-size: 20px;
}
</style>
</head>
<body>
<p>The following two lines should look differently. The first line is synthetic bold of normal face, the second line is bold face.</p>
<div class="face bold"><span>The quick brown fox jumps over the lazy dog</span></div>
<div class="local bold"><span>The quick brown fox jumps over the lazy dog</span></div>
<p>The following two lines should look differently. The first line is synthetic italic of normal face, the second line is italic face.</p>
<div class="face italic"><span>The quick brown fox jumps over the lazy dog</span></div>
<div class="local italic"><span>The quick brown fox jumps over the lazy dog</span></div>
<script src="resources/wait_for_async_local_fonts.js"></script>
</body>
</html>
